<template>
  <section class="person-card">
    <section>
      <span>{{ posts }}</span>
    </section>
    <section class="person-bg"><img src="@/assets/imgs/dataAnalysis/person.png" width="20vw" alt="" /></section>
    <section>
      <span>{{ name }}</span>
    </section>
  </section>
</template>
<script setup lang="ts">
defineProps<{
  posts: string
  name: string
}>()
</script>
<style scoped>
.person-card {
  width: 3.6vw;
  text-align: center;
  margin-top: 0.4vw;
}

.person-bg {
  width: 2.604vw;
  height: 2.604vw;
  background-image: url('@/assets/imgs/dataAnalysis/person-bg.png');
  background-repeat: no-repeat;
  background-size: 100%;
  padding-top: 0.6vw;
  margin: 0.3vw 0.5vw;
}
</style>
